<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>replace all rows</title>
		<meta name="description" content="updating all 1,000 rows" />
		<style>
			.preloadicon {
				display: none;
			}
			.glyphicon-remove:before {
				content: '⨯';
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
		<script type="module">
			import {
				measureName,
				measureMemory,
				testElementText,
				afterFrame,
				afterFrameAsync,
				markRunStart,
				markRunEnd
			} from './util.js';
			import * as framework from 'framework';
			import { render } from '../src/keyed-children/index.js';

			const { run } = render(framework, document.getElementById('main'));

			async function main() {
				const elementSelector = 'tr:first-child > td:first-child';

				// MUST BE KEPT IN SYNC WITH WARMUP COUNT IN benches/scripts/config.js
				const WARMUP_COUNT = 5;
				for (let i = 0; i < WARMUP_COUNT; i++) {
					markRunStart(`warmup-${i}`);
					run();
					await markRunEnd(`warmup-${i}`);

					await afterFrameAsync();
					testElementText(elementSelector, (i * 1000 + 1).toFixed());
				}

				await afterFrameAsync();

				afterFrame(function () {
					testElementText(elementSelector, WARMUP_COUNT + '001');
					performance.mark('stop');
					performance.measure(measureName, 'start', 'stop');

					measureMemory();
				});

				markRunStart('final');
				performance.mark('start');
				run();
				await markRunEnd('final');
			}

			afterFrame(main);
		</script>
	</body>
</html>
